<template>
    <div class="background">
        <div class="login_container">
            <!-- 登录块 -->
            <div class="login_box">
                <h3 class="login_title" style="text-align: center;">房屋租赁系统</h3>
                <div style="text-align: center;">
                    <el-button type="info" @click="isGuest" >我是租客</el-button>
                    <el-button type="info" @click="isHost">我是房东</el-button>
                </div>
                <!-- 表单区域 -->
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login_form" label-width="80px">
                    <!-- 用户名 -->
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" class="input_model" prefix-icon="el-icon-user" />
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" class="input_model" prefix-icon="el-icon-lock" type="password" />
                    </el-form-item>
                    <!-- 按钮 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="primary" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                index: '',
                // 表单数据对象
                loginForm: {
                    username: '',
                    password: '',
                    type: 0
                },
                // 验证对象
                loginRules: {
                    // 校验用户名
                    username: [
                        // 必填项验证
                        { required: true, message: '用户名', trigger: 'blur' },
                        // 长度验证
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ],
                    // 校验密码
                    password: [
                        // 必填验证
                        { required: true, message: '密码', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 ~ 18 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            // 登录方法
            login() {
                const _this = this;
                this.$refs.loginForm.validate(async valid => {
                    // 校验失败
                    if (!valid) return
                    // 访问后台
                    const { data: res } = await _this.$http.post('user/login', _this.loginForm)
                    console.log(res)
                    if (res.code === 200) {
                        // 信息提示正确
                        _this.$message.success('操作成功！')
                        window.sessionStorage.setItem('user', res.user)
                        // 页面路由跳转
                        if(_this.loginForm.type === 1)
                        {
                            localStorage.setItem('username', res.data.username)
                            localStorage.setItem('userId', res.data.id)
                            await this.$router.push({ name: 'Index', params: {username:  res.data.username}})
                        }else {
                            localStorage.setItem('username', res.data.username)
                            localStorage.setItem('userId', res.data.id)
                            this.$store.state.username = res.data.username
                            await this.$router.push({ name: 'HostHome', params: {username:  res.data.username}})
                        }

                    } else {
                        // 信息错误提示
                        this.$message.error('操作失败！')
                    }
                })
            },
            isGuest: function() {
                this.loginForm.type = 1;
            },
            isHost: function()
            {
                this.loginForm.type = 2;
            },
            register: function () {
                this.$router.push("register")
            }
        }
    }
</script>

<style scoped>
    .background{
        position: absolute;
        background: url("https://pic4.zhimg.com/80/v2-2bb80dbebe684c6523416cc08e92c311_720w.jpg?source=1940ef5c") no-repeat center;
        width: 100%;
        height: 100%;
    }
    .title{
        position: absolute;
        font-family: PingFangSC-Semibold;
        font-size: 48px;
        color: #ffffff;
        top: 18%;
        left: 21%;
    }
    .title1{
        position: absolute;
        font-family: PingFangSC-Semibold;
        font-size: 26px;
        color: #ffffff;
        top: 27%;
        left: 32%;
    }
    .img{
        width: 40%;
        position: absolute;
        left: 15%;
        top: 25%;
    }
    /*根节点样式*/
    .login_container{
        /*background-color: #12ADA9;*/
        height: 100%;
    }
    .login_box{
        position: absolute;
        top: 48%;
        left: 50%;
        height: 450px;
        transform: translate(-50%, -50%);
        width: 450px;
        background: #ffffff;
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    }
    .login_title{
        font-weight: normal;
        font-size: 26px;
        line-height: 32px;
        color: #00C2B3;
        position: relative;
        margin-top: 50px;
    }
    .login_form.el-form{
        top: 95px;
    }
    .el-button--info {
        color: #000000;
        background-color: #ffffff;
        border-color: #dfe6e9;
        width: 120px;
        border-radius: 0px;
        margin-top: 20px;
    }
    .el-button--info:hover{
        color: #12ADA9;
        background-color: #ffffff;
        border-color: #12ADA9;
    }
    .el-button--info:focus{
        color: #12ADA9;
        background-color: #ffffff;
        border-color: #12ADA9;
    }
    .login_form .el-input__inner{
        color: #2c3e50;
        border-color: #dfe6e9;
        border-radius: 0px;
    }
    .login_form .el-input__inner:hover{
        border-color: #12ADA9;
    }
    .login_form .el-input__inner:focus{
        border-color: #12ADA9;
    }

    .login_box .avatar_box{
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        padding: 0.1px;
        box-shadow: 0 0 5px #eee;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .login_box .avatar_box .img{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #243F58;
    }

    .login_form{
        margin-top: 100px;
        position: absolute;
        width: 80%;
        padding: 0 10px;
    }

    .btns{
        margin: 0 auto;
    }

    .el-button--primary {
        color: #fff;
        background-color: #00C2B3;
        border-color: #00C2B3;
        width: 120px;
        border-radius: 0px;
    }
    .el-button--primary:hover {
        color: #fff;
        background-color: #12ADA9;
        border-color: #12ADA9;
    }
    .el-button--primary:focus {
        color: #fff;
        background-color: #12ADA9;
        border-color: #12ADA9;
    }
</style>
